<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/bulma.min.css">
    <script src="/static/js/vue.global.prod.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <title>myproxyinfo</title>
</head>
<body>
<nav class="navbar is-light" id="mynav">
  <div class="navbar-menu">
    <div class="navbar-start">
      <template v-for="myleft in mylefts">
        <a class="navbar-item" :href="myleft.href">{{ myleft.display }}</a>
      </template>
    </div>
    <div class="navbar-end">
      <template v-for="myright in myrights">
        <a class="navbar-item" :href="myright.href">{{ myright.display }}</a>
      </template>
    </div>
  </div>
</nav>
<div id="app" class="columns">
  <div class="column is-4">
       <form>
          <input type="text" class="input" v-model="updateinfo.id" readonly>
          <input type="text" class="input" v-model="updateinfo.name" placeholder="name" readonly>
          <input type="text" class="input" v-model="updateinfo.address" placeholder="address">
          <input type="text" class="input" v-model="updateinfo.user" placeholder="user">
          <input type="text" class="input" v-model="updateinfo.key" placeholder="key">
          <button type="button" class="button" @click="realupdate(updateinfo)">update</button>
          <button type="button" class="button" @click="delete_by_id(updateinfo.id)">delete</button>
           <pre style="white-space: pre-wrap; word-wrap: break-word;">{{updatedisplay}}</pre>
      </form>
  </div>
</div>
<script src="/static/js/thesame.js"></script>
<script>
const app = {
  data() {
    return {
        id : '',
        updatedisplay: '',
        updateinfo: {},
    }
  },
  watch : {
  },
  methods: {
    delete_by_id(id){
        if ( confirm("确认删除?")==false ) {
            return false;
        }
        axios({
          method:'get',
          url:'/myproxy/DeleteById?id='+id,
          async:false
        })
        .then(response => {
            console.log(response.data);
            window.location.href = "/static/myproxy.html"
        })
    },
    realupdate(updateinfo){
        this.updatedisplay = 'update ing...';
        axios({
          method:'post',
          url:'/myproxy/Update',
          data: JSON.stringify(updateinfo),
          async:false
        })
        .then(response => {
            this.updatedisplay = response.data;
        })
    },
    getinfo_byid(id){
        axios({
          method:'get',
          url:'/myproxy/GetById?id='+id,
          async:false
        })
        .then(response => {
            result = response.data;
            this.updateinfo = result;
        })
    }
  },
  mounted () {
    mysearch = window.location.search;
    mysearch = mysearch.replace(/^\?/,'');
    myparam = mysearch.split('=');
    this.id = myparam[1];
    this.getinfo_byid(this.id);
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>